默认布局：完成菜单4种混合模式交互
四种菜单模式（vertical、horizontal、mix、mix-sidebar）各有一套渲染逻辑和样式调整。本节汇总四种模式的完整交互效果，重点解决折叠态下二级菜单图标的保留问题。
四种模式的渲染策略
// 根据 menuMode 选择渲染模板
const menuLayout = computed(() => {
switch (settings.menuMode) {
case 'vertical':
return 'sidebar' // 左侧完整菜单
case 'horizontal':
return 'topbar' // 顶部水平菜单
case 'mix':
return 'top-sidebar' // 顶部一级 + 左侧二级
case 'mix-sidebar':
return 'icon-sidebar' // 左侧图标 + 展开二级
default:
return 'sidebar'
}
})
typescript
折叠态下二级菜单图标处理
混合模式折叠时（左侧宽度 64px），二级菜单的图标默认会被隐藏。要保留二级菜单图标同时折叠文字，需要调整折叠宽度策略：
折叠前：左侧 240px（完整菜单）
折叠后：左侧 64px（图标模式）
text
核心思路：不要将第一个菜单（顶级）的宽度写死为 64px，而是让第一个菜单自适应宽度，第二个菜单（子级）设置 width: 64px 并折叠。这样顶级菜单保持完整显示，子级菜单只显示图标。
/* 混合模式：子级菜单折叠但保留图标 */
.mix-sub-menu {
width: 64px;
:deep(.el-menu-item) {
/* 折叠态下只显示图标 */
.menu-text {
display: none;
}
}
}
css
模式切换的过渡动画
菜单模式切换时，布局变化应该平滑过渡。通过 CSS transition 实现：
.sidebar-container {
transition: width 0.3s ease;
overflow: hidden;
}
css
Element Plus Menu 的折叠/展开自带动画。对于混合模式中子级菜单的显隐，可以通过 v-show 配合 transition 实现滑入滑出效果。
模式4的完整交互
混合侧栏模式（mix-sidebar）的完整交互流程：
- 页面加载 → 左侧显示一级菜单图标（64px 宽）
- 点击一级菜单图标 → 如果有子菜单，右侧展开子菜单区域
- 子菜单区域显示完整的二级/三级菜单树
- 点击子菜单项 → 触发路由跳转
- 折叠子菜单 → 子菜单区域收起，回到只有图标的状态
- 如果一级菜单无子项 → 直接跳转路由
刷新后状态保持
用户切换模式后刷新页面，需要从 URL 或 localStorage 恢复菜单模式：
// 从 localStorage 读取主题配置
const savedSettings = localStorage.getItem('themeSettings')
if (savedSettings) {
Object.assign(localSettings, JSON.parse(savedSettings))
}
// 监听变化自动保存
watch(localSettings, (val) => {
localStorage.setItem('themeSettings', JSON.stringify(val))
}, { deep: true })
typescript
↑